<template>
	<view>
		
	</view>
</template>

<script>
	// import vue-json-ui-editor
	import JsonEditor from 'vue-json-ui-editor';
	import { Option } from 'element-ui';

	JsonEditor.setComponent('form', 'el-form', ({ vm }) => {
		// vm is the JsonEditor VM

		const labelWidth = '120px';
		const model = vm.data;
		const rules = {};
		let propertiesObject = vm.schema.properties

		function parseField(fields) {
			Object.keys(fields).forEach(key => {
				if (key.indexOf('$') === 0 && key !== '$sub') return;
				const field = fields[key];
				if (field.$sub) {
					return parseField(field);
				}
				if (!field.name) return;
				rules[field.name] = [];
				// http://element.eleme.io/#/en-US/component/form#validation
				const type = field.schemaType === 'array' && field.type === 'radio' ? 'string' : field.schemaType;
				const required = field.required;
				const message = field.title;
				const trigger = ['radio', 'checkbox', 'select'].includes(field.type) ? 'change' : 'blur';
				rules[field.name].push({ type, required, message, trigger });

				if (field.minlength !== undefined || field.maxlength !== undefined) {
					const max = field.maxlength || 255;
					const min = field.minlength || 0;
					const msg = `Length must between ${ min } and ${ max }`;
					rules[field.name].push({ min, max, message: msg, trigger });
				}

				if (field.type === 'number') {
					let name = field.name
					let value = propertiesObject[name]
					let val = vm.data[name]
					if (value.maximum === undefined && value.minimum === undefined) {
						return true
					} else if (value.maximum !== undefined && value.minimum === undefined && val > value.maximum) {
						const max = value.maximum;
						const msg = `The maximum value must be less than ${ max }`;
						rules[field.name].push({ max, message: msg, trigger });
					} else if (value.minimum !== undefined && value.maximum === undefined && val < value.minimum) {
						const min = value.minimum;
						const msg = `The minimum value must be greater than ${ min }`;
						rules[field.name].push({ min, message: msg, trigger });
					} else if ((value.maximum !== undefined && val > value.maximum) || (value.minimum !== undefined && val < value.minimum)) {
						const max = value.maximum;
						const min = value.minimum;
						const msg = `The maximum or minimum must between ${ min } and ${ max }`;
						rules[field.name].push({ min, max, message: msg, trigger });
					}
				}

				if (field.pattern !== undefined) {
					let pattern = new RegExp(field.pattern);
					if (!pattern.test(vm.data[field.name])) {
						rules[field.name].push({ message: 'input error', trigger });
					}
				}
			});
		}

		parseField(vm.fields);

		// returning the form props
		return { labelWidth, rules, model };
	});

	// http://element.eleme.io/#/en-US/component/form#validation
	JsonEditor.setComponent('label', 'el-form-item', ({ field }) => ({
		prop: field.name,
	}));

	JsonEditor.setComponent('email', 'el-input');
	JsonEditor.setComponent('url', 'el-input');
	JsonEditor.setComponent('number', 'el-input-number');
	JsonEditor.setComponent('text', 'el-input');
	JsonEditor.setComponent('textarea', 'el-input');
	JsonEditor.setComponent('checkbox', 'el-checkbox');
	JsonEditor.setComponent('checkboxgroup', 'el-checkbox-group');
	JsonEditor.setComponent('radio', 'el-radio');
	JsonEditor.setComponent('radiogroup', 'el-radio-group');
	JsonEditor.setComponent('select', 'el-select');
	JsonEditor.setComponent('switch', 'el-switch');
	JsonEditor.setComponent('color', 'el-color-picker');
	JsonEditor.setComponent('rate', 'el-rate');

	// You can also use the component object
	JsonEditor.setComponent('option', Option);

	// By default `<h1/>` is used to render the form title.
	// To override this, use the `title` type:
	JsonEditor.setComponent('title', 'h2');

	// By default `<p/>` is used to render the form title.
	// To override this, use the `description` type:
	JsonEditor.setComponent('description', 'small');

	// By default `<div/>` is used to render the message error.
	// To override this, use the `error` type:
	JsonEditor.setComponent('error', 'el-alert', ({ vm }) => ({
		type: 'error',
		title: vm.error,
	}));

	export default {
		name: 'JsonSchema',
		components: { JsonEditor },
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>
